<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <title th:text="${article.getTitle()}"></title>
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/global.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/pace-theme-flash.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/d-audio.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/article-detail.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/code.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/github-markdown.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/vditor.css">
    <link rel="shortcut icon" href="http://img.wzfdepress.com/avatar.jpg">

    <style>
        .lazy-image {
            background: url('http://wzfdepress.com/static/img/loading.gif') no-repeat center;
            background-size: 26% 35%;
            height: 100%;
            width: 100%;
        }

        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            max-width: 980px;
            margin: 0 auto;
            padding: 10px;
        }

        @media (max-width: 767px) {
            .markdown-body {
                padding: 15px;
            }

            .markdown-body h1 {
                font-size: 1.35em;
            }

        }

        .codehilite {
            border-radius: 10px;
        }

        .article-content img {
            max-width: 100%;
        }

        #outerdiv {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
            display: none;
            z-index: 200;
        }
    </style>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!--PC导航栏-->
    <nav class="nav-bar-holder">
        <div class="nav-bar" id="nav-bar">
            <div class="logo-box">
                <a href="index.html" class="blog-title ta-c"><img style="vertical-align: top;" alt="logo"
                        src="http://img.wzfdepress.com/avatar.jpg" /></a>
            </div>
            <div class="nb-a-holder" id="home"><a class="nb-a ta-c" href="http://wzfdepress.com">首页</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="http://wzfdepress.com/category.html">分类</a></div>
<!--            <div class="nb-a-holder"><a class="nb-a ta-c" href="http://wzfdepress.com/tag.html">标签墙</a></div>-->
            <div class="nb-a-holder"><a class="nb-a ta-c" href="http://wzfdepress.com/archive.html">归档</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="http://wzfdepress.com/link.html">友情链接</a></div>
            <!--搜索框-->
            <div id="search-nb">
                <span class="search-s fl">
                    <label for="search-input"></label><input class="fl" type="text" id="search-input"
                        placeholder="请输入关键字">
                    <a class="search-icon fl" onclick="search_by_key()" href="javascript:void(0);"></a>
                </span>
            </div>
<!--            <div class="nb-a-holder-last">-->
<!--                <div class="nb-a-holder-small">-->
<!--                    <a class="a-login" href="login.html">登录</a>-->
<!--                </div>-->
<!--                <div class="nb-a-holder-small">-->
<!--                    <a class="a-login" href="register.html">注册</a>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </nav>
    <!--mobile导航栏-->
    <nav class="mobile-nav">
        <div class="logo-box">
            <a href="index.html" class="blog-title ta-c">
                <img style="vertical-align: top;" alt="logo" src="http://img.wzfdepress.com/avatar.jpg" /></a>
        </div>
        <a id="mobile_cate" style="background-image: url('http://wzfdepress.com/static/img/cate.svg')" href="javascript:void(0);"></a>
    </nav>
    <ul id="nav-m-list">
        <li id="cancel-li"><a class="fr" id="cancel" href="javascript:void(0);"></a></li>
        <li id="m-img-li">
            <img id="m-img" alt="苍茫误此生" src="http://img.wzfdepress.com/avatar.jpg">
        </li>
        <li>
            <span class="search-s fl">
                <label for="search-input-m"></label><input class="fl" type="text" id="search-input-m" placeholder="关键词">
                <a class="search-icon fl" onclick="m_search()" href="javascript:void(0);"></a>
            </span>
        </li>
        <li><a class="w-h-100 fl" href="http://wzfdepress.com/index.html">首页</a></li>
<!--        <li><a class="w-h-100 fl" href="http://wzfdepress.com/login.html">登录</a></li>-->
<!--        <li><a class="w-h-100" href="http://wzfdepress.com/register.html">注册</a></li>-->
        <li><a class="w-h-100 fl" href="http://wzfdepress.com/category.html">分类</a></li>
        
        <li><a class="w-h-100 fl" href="/archive.html">归档</a></li>
        <li><a class="w-h-100 fl" href="/link.html">友情链接</a></li>
    </ul>
    <div id="d-audio" class="d-audio" style="width: 150px; z-index: 99; position: fixed; bottom: 5px; left: 5px;"></div>
    <!--文章目录-->
<!--    <div class="toc">-->
<!--        <ul>-->
<!--            <li><a href="#_1">二. 栈和队列</a>-->
<!--                <ul>-->
<!--                    <li><a href="#1">1. 栈</a>-->
<!--                        <ul>-->
<!--                            <li><a href="#1_1">(1) 概念</a></li>-->
<!--                            <li><a href="#2">(2) 数据结构</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a href="#2_1">2. 队列</a>-->
<!--                        <ul>-->
<!--                            <li><a href="#1_2">(1) 概念</a></li>-->
<!--                            <li><a href="#2_2">(2) 数据结构</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </li>-->
<!--        </ul>-->
<!--    </div>-->

    <!--主体-->
    <section class="main">
        <label for="article_id"></label><input hidden id="article_id" name="article_id" value="55">
        <label for="user_id"></label><input hidden id="user_id" name="user_id"
            value="{{ no such element: django.contrib.sessions.backends.cache.SessionStore object[&#39;user_id&#39;] }}">
        <div class="left-box">
            <div id="outerdiv">
                <div id="innerdiv" style="position:absolute;"><img alt id="bigimg"
                        style="box-shadow: 0 0 10px rgba(0,0,0,0.38)" src="" />
                </div>
            </div>
            <!--文章内容-->
            <div class="article-container">
                <div class="article-content markdown-body">
                    <h1 style="margin: 10px 0" th:text="${article.getTitle()}"></h1>
                    <div class="article-cate">
                        <span th:each="tag:${article.getTags()}">
                            <a th:text="${tag}"></a>
                        </span>
                    </div>
                    <div class="writer-info">
                        <span style="margin: 5px 0;" >作者</span>
                        <span id="writer" th:text="${article.getAuthorName()}"></span>
                        <span id="write4-time" th:text="${#dates.format(article.getGmtModified(),'yyyy-MM-dd HH:mm:ss')}"></span>
                        <span>阅读(<span id="read-number" th:text="${article.getViewNum()}"></span>)</span>
<!--                        <span>评论(<span id="comment-number">0</span>)</span>-->
                    </div>
                    <div th:utext="${article.getContent()}"></div>
            </div>
        </div>
    </section>
    <!--尾部-->
    <footer class="footer">
        <div class="footer-line">
            <div class="icon-center">
                <span class="icon-box"><a id="github-icon" target="_blank" href="https://gitee.com/cheerfulwzf"
                                          class="foot-icon"></a>
                </span>
                <span class="icon-box"><a id="qq-icon" target="_blank"
                                          href="tencent://Message/?Uin=2434780193&amp;websiteName=q-zone.qq.com&amp;Menu=yes"
                                          class="foot-icon"></a>
                </span>
            </div>
        </div>
        <div class="footer-line">Powered By <a href="mailto:cheerful0120@qq.com"
                                               target="_blank">Cheerful</a> • © 2021-10</div>
        <div class="footer-line"><a href="http://beian.miit.gov.cn/" target="_blank"> 蜀ICP备2021024763号</a>
    </footer>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/sweetalert.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/pace.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/base.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/d-audio.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/vditor.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/article-detail.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    <script type="text/javascript" defer>


        //图片懒加载
        const lazyImage = new LazyImage('.lazy-image');
    </script>
</body>

</html>